<template>
    <div class="chart-wrap" style="height:100%;padding-top:40px;">
        <div class="count">
            <span>当日进园（辆）<span class="blue">10239</span></span>
            <span style="margin-left: 20px;">当日访客（辆）<span class="yellow">502</span></span>
        </div>
        <div style="height:100%;" ref="chart"></div>
    </div>
</template>

<script>
import { defineComponent,ref,onMounted } from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
    setup() {
        const chart = ref(null);

        onMounted(()=>{
            var fontColor = '#30eee9';
            var option ={
                    grid: {
                        left: '5%',
                        right: '5%',
                        top:'20%',
                        bottom: '5%',
                        containLabel: true
                    },
                    tooltip : {
                        show: true,
                        trigger: 'item'
                    },
                    legend: {
                        show:true,
                        x:'center',
                        y:'0',
                        itemWidth:10,
                        itemHeight:10,
                        textStyle:{
                            color:'#1bb4f6'
                        },
                        data:['电耗','水耗']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            axisLabel:{
                                color: fontColor
                            },
                            axisLine:{
                                show:true,
                                lineStyle:{
                                    color:'#397cbc'
                                }
                            },
                            axisTick:{
                                show:false,
                            },  
                            splitLine:{
                                show:false,
                                lineStyle:{
                                    color:'#195384'
                                }
                            },
                            data : ['0:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00','22:00']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            name : '单位：kwh',
                            splitNumber:5,
                            min:0,
                            axisLabel : {
                                formatter: '{value}',
                                textStyle:{
                                    color:'#2ad1d2'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#27b4c2'
                                }
                            },
                            axisTick:{
                                show:false,
                            },
                            splitLine:{
                                show:true,
                                lineStyle:{
                                    color:'#11366e'
                                }
                            }
                        },
                        {
                            type : 'value',
                            name : '单位：吨',
                            min:0,
                            axisLabel : {
                                formatter: '{value} ',
                                textStyle:{
                                    color:'#186afe'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:'#186afe'
                                }
                            },
                            axisTick:{
                                show:false,
                            },
                            splitLine:{
                                show:true,
                                lineStyle:{
                                    color:'#11366e'
                                }
                            }
                        }
                    ],
                    series : [
                        {
                            name:'电耗',
                            type:'bar',
                            symbol:'circle',
                            symbolSize: 8,
                            itemStyle: {
                                normal: {
                                    color:'#0092f6',
                                    lineStyle: {
                                        color: "#0092f6",
                                        width:1
                                    },
                                    areaStyle: { 
                                        //color: '#94C9EC'
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: 'rgba(7,44,90,0.3)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(0,146,246,0.9)'
                                        }]),
                                    }
                                }
                            },
                            markPoint:{
                                itemStyle:{
                                    normal:{
                                        color:'red'
                                    }
                                }
                            },
                            data:[120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
                        },
                        {
                            name:'水耗',
                            type:'line',
                            symbol:'circle',
                            symbolSize: 8,
                            yAxisIndex:1,
                            itemStyle: {
                                normal: {
                                    color:'#00d4c7',
                                    lineStyle: {
                                        color: "#00d4c7",
                                        width:1
                                    },
                                    areaStyle: { 
                                        //color: '#94C9EC'
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: 'rgba(7,44,90,0.3)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(0,212,199,0.9)'
                                        }]),
                                    }
                                }
                            },
                            data:[220, 182, 191, 234, 290, 330, 310,201, 154, 190, 330, 410]
                        },                        
                    ]
            };

            var chartDom = echarts.init(chart.value);
            chartDom.setOption(option)
        })

        return {
            chart
        }
    }
});
</script>

<style lang="scss" scoped>
.chart-wrap {
    position: relative;
    .count {
        height:40px;
        width:100%;
        position: absolute;
        top:0;
        left:0;
        font-size:12px;
        padding-left:20px;
        .blue {
            color:blue;
            font-size:18px;
            font-weight: bold;
        }
        .yellow {
            color:yellow;
            font-size:18px;
            font-weight: bold;
        }
    }
}
</style>